<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-row :gutter="24">
        <a-col :span="4">
          <!-- 存货分类树 -->
          <inventory-tree
            ref="deptTree"
            :inventoryOptions="inventoryOptions"
            @select="clickInventoryNode"
          />
        </a-col>
        <a-col :span="20">
          <!-- 条件搜索 -->
          <div class="table-page-search-wrapper">
            <a-form layout="inline">
              <a-row :gutter="48">
                <a-col :md="8" :sm="24">
                  <a-form-item label="货物名称">
                    <a-input v-model="queryParam.inventoryName" placeholder="请输入" allow-clear />
                  </a-form-item>
                </a-col>
                <a-col :md="8" :sm="24">
                  <a-form-item label="货物编码" >
                    <a-input v-model="queryParam.inventoryCode" placeholder="请输入" allow-clear />
                  </a-form-item>
                </a-col>
                <!-- <template v-if="advanced">
                  <a-col :md="8" :sm="24">
                    <a-form-item label="状态" prop="status">
                      <a-select placeholder="请选择状态" style="width: 100%" allow-clear>
                        <a-select-option v-for="(d, index) in dict.type['sys_normal_disable']" :key="index" :value="d.value">{{ d.label }}</a-select-option>
                      </a-select>
                    </a-form-item>
                  </a-col>
                  <a-col :md="8" :sm="24">
                    <a-form-item label="创建时间">
                      <a-range-picker style="width: 100%" v-model="dateRange" valueFormat="YYYY-MM-DD" format="YYYY-MM-DD" allow-clear />
                    </a-form-item>
                  </a-col>
                </template> -->
                <a-col :md="!advanced && 8 || 24" :sm="24">
                  <span class="table-page-search-submitButtons" :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                    <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button>
                    <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button>
                    <!-- <a @click="toggleAdvanced" style="margin-left: 8px">
                      {{ advanced ? '收起' : '展开' }}
                      <a-icon :type="advanced ? 'up' : 'down'"/>
                    </a> -->
                  </span>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <!-- 数据展示 -->
          <a-table
            :loading="loading"
            rowKey="userId"
            :columns="columns"
            :data-source="list"
            :pagination="false"
            :bordered="tableBordered">
            <span slot="action" slot-scope="text, record">
              <template >

                <a-divider type="vertical"/>
                <a @click="handleUpdate(record, undefined)" >
                  <a-icon type="edit" />编辑
                </a>
              </template>
            </span>
          </a-table>
          <a-pagination
            class="ant-table-pagination"
            show-size-changer
            show-quick-jumper
            :current="queryParam.pageNum"
            :total="total"
            :page-size="queryParam.pageSize"
            :showTotal="total => `共 ${total} 条`"
            @showSizeChange="onShowSizeChange"
            @change="changeSize"
          />
        </a-col>
      </a-row>
      <!-- 创建/编辑,单独封装了组件 -->
      <create-form
        ref="createForm"
        @ok="getList"
      />
    </a-card>
  </page-header-wrapper>

</template>

<script>
import { inventoryCategory, inventoryItem } from '@/api/baseData/inventory'
import InventoryTree from './modules/inventoryTree.vue'
import { tableMixin } from '@/store/table-mixin'
import CreateForm from './modules/CreateForm.vue'

export default {
  name: 'Inventory',
  components: {
    InventoryTree,
    CreateForm
  },
  mixins: [tableMixin],
  dicts: ['sys_normal_disable'],
  data () {
    return {
      list: [],
      // 部门树选项
      inventoryOptions: [],
      loading: false,
      queryParam: {
        pageNum: 1,
        pageSize: 10,
        inventoryCode: undefined,
        inventoryName: undefined
      },
      // 高级搜索 展开/关闭
      advanced: false,
      columns: [
        {
          title: '存货编码',
          dataIndex: 'inventoryCode'
        },
        {
          title: '存货名称',
          dataIndex: 'inventoryName',
          align: 'center'
        },
        {
          title: '简称',
          dataIndex: 'shortName',
          align: 'center'
        },
        {
          title: '规格型号',
          dataIndex: 'specificationModel',
          align: 'center'
        },
        {
          title: '计量单位',
          dataIndex: 'unitOfMeasurement',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '库存下限',
          dataIndex: 'inventoryFloor',
          ellipsis: true,
          align: 'center'
        },
        {
          title: '操作',
          dataIndex: 'action',
          key: 'action',
          fixed: 'right',
          width: 150,
          scopedSlots: { customRender: 'action' }
        }
      ],
      total: 0
    }
  },
  filters: {
  },
  created () {
    this.getInventoryCategoryTree()
    this.getList()
  },
  computed: {
  },
  watch: {
  },
  methods: {

// 查询所有数据tree
    getInventoryCategoryTree () {
      inventoryCategory().then(res => {
        console.info('inventoryCategory', res)
        this.inventoryOptions = res.data
      })
    },
    selectedRowKeys () {

    },
    clickInventoryNode (categoryCode) {
      this.queryParam.categoryCode = categoryCode
      this.handleQuery()
    },
    onShowSizeChange (current, pageSize) {
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    changeSize (current, pageSize) {
      this.queryParam.pageNum = current
      this.queryParam.pageSize = pageSize
      this.getList()
    },
    /** 查询部门列表 */
    getList () {
      this.loading = true
      inventoryItem(this.queryParam).then(response => {
        console.info(response, 'inventoryItem')
          this.list = response.rows // this.handleTree(response.data, 'deptId')
          this.total = response.total
          this.loading = false
        }
      )
    },
    /** 查询菜单下拉树结构 */
    getTreeselect (row) {
      if (!row) {
        // listDept().then(response => {
        //   this.deptOptions = this.handleTree(response.data, 'deptId')
        // })
      } else {
        // listDeptExcludeChild(row.deptId).then(response => {
        //   this.deptOptions = this.handleTree(response.data, 'deptId')
        // })
      }
    },
    /** 搜索按钮操作 */
    handleQuery () {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery () {
      this.queryParam = {
        deptName: undefined,
        status: undefined
      }
      this.handleQuery()
    },
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    /** 删除按钮操作 */
    handleDelete (row) {
      // var that = this
      const deptId = row.deptId
      this.$confirm({
        title: '确认删除所选中数据?',
        content: '当前选中编号为' + deptId + '的数据',
        onOk () {
          // return delDept(deptId)
          //   .then(() => {
          //     that.getList()
          //     that.$message.success(
          //       '删除成功',
          //       3
          //     )
          // })
        },
        onCancel () {}
      })
    }
  }
}
</script>

<style lang="less" scoped>
.page-header-wrapper-grid-content-main {
  width: 100%;
  height: 100%;
  min-height: 100%;
  transition: 0.3s;
  }

  </style>
